<template>
  <div class="container-item-poster-list">
    <div v-for="(temp, index) in list" :key="index+Math.random()" class="item-poster">
      <el-image class="item-image" :src="valueKey?temp[valueKey]:temp" fit="cover" />
      <el-button v-if="showDelete" style="margin-right:10px" circle class="el-icon-delete" type="danger" @click="deleteImageHandler(index)" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [Array, String],
      default: ''
    },
    showDelete: {
      type: [Boolean, String],
      default: false
    },
    valueKey: {
      type: [String, Boolean],
      default: false
    }
  },
  computed: {
    list() {
      if (this.value instanceof Array) {
        return this.value;
      }
      return this.value ? this.value.split(',') : [];
    }
  },
  methods: {
    // 删除图片
    deleteImageHandler(index) {
      this.$emit('delete', index);
    }
  }
};
</script>

<style lang="scss" scoped>
.container-item-poster-list {
  display: flex;
  .item {
    &-poster {
      margin-bottom: 10px;
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    &-image {
      width: 64px;
      height: 128px;
      margin: 0 10px 10px 0;
      box-shadow: 0 0 3px #ddd;
    }
  }
}
</style>
